<template>
    <div>
        <el-dialog :title="specsInfo.isAdd ? '添加商品规格' : '编辑商品规格'" center :visible.sync="specsInfo.isShow"
            :before-close="cancel">
            <el-form ref="formRef" :model="specsform" :rules="rules" :inline="true" label-width="150px">
                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="specsname">
                    <el-input v-model="specsform.specsname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="xin" label="规格属性" :label-width="formLabelWidth" v-for="(item, index) in attrArr">
                    <el-input v-model="item.value"></el-input>
                    <el-button v-if="index == 0" @click="addattr">新增规格属性</el-button>
                    <el-button v-else @click.prevent="removeattr(index)">删除</el-button>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="specsform.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { specsadd, specsedit, specsinfo } from '../../request/api'
export default {
    props: ['specsInfo'],
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: "120px",
            specsform: {
                specsname: "",//商品规格名称string’颜色‘
                attrs: "",//商品规格属性值string"白色,红色，黄色"
                status: 1,//状态1正常2禁用number1
            },
            rules: {
                specsname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
                ]
            },
            attrArr: [{
                value: ''
            }],

        }
    },
    methods: {
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        // 清空弹框
        reset() {
            this.specsform = {
                specsname: "",//商品规格名称string’颜色‘
                attrs: "",//商品规格属性值string"白色,红色，黄色"
                status: 1,//状态1正常2禁用number1
            }
            //清除校验 
            this.$refs.formRef.resetFields()
            // 清除规格属性
            this.attrArr=[
                {
                    value:''
                }
            ]
        },
        //数据回显
        async lookup(id) {
            let result = await specsinfo({ id })
            console.log(result);
            this.specsform = result.list[0]
            this.specsform.attrs.map((item, index) => {
                if (index == 0) {
                    this.attrArr[0].value = item
                } else {
                    this.attrArr.push({
                        value: item
                    })
                }

            })


        },
        // 点击确定添加或者编辑
        confirm() {
            this.$refs.formRef.validate((val) => {
                if (val) {
                    this.specsform.attrs = this.attrArr.map(item => item.value).join(',')
                    if (this.specsInfo.isAdd) {
                        specsadd(this.specsform)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$store.dispatch('specs/GetSpecsInfo')
                                    this.$store.dispatch('specs/GetCountInfo')
                                    this.cancel()
                                    this.$message.success(res.msg)
                                } else {
                                    this.$message.error(res.msg)
                                }

                            })
                    } else {
                        specsedit(this.specsform)
                            .then(res => {
                                if (res.code == 200) {
                                    this.$store.dispatch('specs/GetSpecsInfo')
                                    this.$store.dispatch('specs/GetCountInfo')
                                    this.cancel()
                                    this.$message.success(res.msg)
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    }
                }
            })
        },
        // 新增规格属性
        addattr() {
            if (this.attrArr.length > 5) {
                this.$message.warning('最多添加5条规格属性')
                return
            }
            this.attrArr.push({
                value: ''
            });
        },
        //删除当前规格属性
        removeattr(index) {

            this.attrArr.splice(index, 1)
        }
    },
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped>
.el-form--inline .xin>>>.el-form-item__label {
    float: left;
}

.xin>>>.el-form-item__content {
    display: flex;
}

.el-form--inline .el-form-item {
    display: block;
}
</style>